<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯CSS3按钮边框线条动画特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
c
  	<link href="css/animated-border.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/animated-border.css">
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>纯CSS3按钮边框线条动画特效 <span>Pure CSS3 Animated Border</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/css3donghua/201710314803.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<main class="main">
			<section class="gridBox">

        <section class="box">
            <header>.ui-box .topBottom-leftRightCorner</header>
            <article><a href='' class='ui-box topBottom-leftRightCorner'><span class='ui-border-element'><i class="fa fa-stop-circle-o" aria-hidden="true"></i> Stop Circle</span></a></article>
        </section>

        <section class="box">
            <header>.ui-box .topBottom-rightLeftCorner</header>
            <article><a href='' class='ui-box topBottom-rightLeftCorner'><span class='ui-border-element'><i class="fa fa-eject" aria-hidden="true"></i> Eject Icon</span></a></article>
        </section>

        <section class="box">

        </section>

        <section class="box">

        </section>

        <section class="divider">
            <div class='dividerLine'></div>
        </section>
        <!-- next -->

        <section class="box">
            <header>.ui-box .forwardBorderTrain</header>
            <article><a href='' class='ui-box forwardBorderTrain'><span class='ui-border-element'><i class="fa fa-beer" aria-hidden="true"></i> Beer Glass</span></a></article>
        </section>

        <section class="box">
            <header>.ui-box .backwardBorderTrain</header>
            <article><a href='' class='ui-box backwardBorderTrain'><span class='ui-border-element'><i class="fa fa-battery-quarter" aria-hidden="true"></i> Battery Icon</span></a></article>
        </section>

        <section class="box">
            <header>.ui-box .border-inOutSpread</header>
            <article><a href='' class='ui-box border-inOutSpread'><span class='ui-border-element'><i class="fa fa-bed" aria-hidden="true"></i> Sleeping Bed</span></a></article>
        </section>

        <section class="box">
            <header>.ui-box .slideOpposite</header>
            <article><a href='' class='ui-box slideOpposite'><span class='ui-border-element'><i class="fa fa-pie-chart" aria-hidden="true"></i> PIE Chart</span></a></article>
        </section>

        <section class="divider">
            <div class='dividerLine'></div>
        </section>

          <!-- next -->

          <section class="box">
              <header>.ui-box .top-leftToRight</header>
              <article><a href='' class='ui-box top-leftToRight'><i class="fa fa-address-book" aria-hidden="true"></i> Address Book</a></article>
          </section>

          <section class="box">
              <header>.ui-box .right-topToBottom</header>
              <article><a href='' class='ui-box right-topToBottom'><i class="fa fa-adjust" aria-hidden="true"></i> adjust</a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-rightToLeft</header>
              <article><a href='' class='ui-box bottom-rightToLeft'><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i> Sign Language</a></article>
          </section>

          <section class="box">
              <header>.ui-box .left-bottomToTop</header>
              <article><a href='' class='ui-box left-bottomToTop'><i class="fa fa-anchor" aria-hidden="true"></i> Anchor</a></article>
          </section>

          <!-- next -->

          <section class="box">
              <header>.ui-box .top-rightToLeft</header>
              <article><a href='' class='ui-box top-rightToLeft'><i class="fa fa-area-chart" aria-hidden="true"></i> Area Chart</a></article>
          </section>

          <section class="box">
              <header>.ui-box .right-bottomToTop</header>
              <article><a href='' class='ui-box right-bottomToTop'><i class="fa fa-arrows" aria-hidden="true"></i> Arrow</a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-leftToRight</header>
              <article><a href='' class='ui-box bottom-leftToRight'><i class="fa fa-arrows-h" aria-hidden="true"></i> Horizontal Arrow</a></article>
          </section>

          <section class="box">
              <header>.ui-box .left-topToBottom</header>
              <article><a href='' class='ui-box left-topToBottom'><i class="fa fa-arrows-v" aria-hidden="true"></i> Vertical Arrow</a></article>
          </section>

          <!-- next -->

          <section class="box">
              <header>.ui-box .top-inOutSpread</header>
              <article><a href='' class='ui-box top-inOutSpread'><i class="fa fa-asterisk" aria-hidden="true"></i> Asterisk</a></article>
          </section>

          <section class="box">
              <header>.ui-box .right-inOutSpread</header>
              <article><a href='' class='ui-box right-inOutSpread'><i class="fa fa-at" aria-hidden="true"></i> Symbol</a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-inOutSpread</header>
              <article><a href='' class='ui-box bottom-inOutSpread'><i class="fa fa-audio-description" aria-hidden="true"></i> Audio Description</a></article>
          </section>

          <section class="box">
              <header>.ui-box .left-inOutSpread</header>
              <article><a href='' class='ui-box left-inOutSpread'><i class="fa fa-car" aria-hidden="true"></i> Cartoon Car</a></article>
          </section>

          <!-- next -->

          <section class="box">
              <header>.ui-box .top-slideOpposite</header>
              <article><a href='' class='ui-box top-slideOpposite'><i class="fa fa-btc" aria-hidden="true"></i> Bit Coin</a></article>
          </section>

          <section class="box">
              <header>.ui-box .right-slideOpposite</header>
              <article><a href='' class='ui-box right-slideOpposite'><i class="fa fa-eur" aria-hidden="true"></i> Euro Currency</a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-slideOpposite</header>
              <article><a href='' class='ui-box bottom-slideOpposite'><span class='ui-border-element'><i class="fa fa-inr" aria-hidden="true"></i> Indian Currency</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .left-slideOpposite</header>
              <article>
                <a href='' class='ui-box left-slideOpposite'><i class="fa fa-usd" aria-hidden="true"></i> USD Dollar</a>
              </article>
          </section>


        <section class="divider">
            <div class='dividerLine'></div>
        </section>
          <!-- next -->

          <section class="box">
              <header>.ui-box .top-leftStart</header>
              <article><a href='' class='ui-box top-leftStart'><span class='ui-border-element'><i class="fa fa-random" aria-hidden="true"></i> Random Box</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .top-rightStart</header>
              <article><a href='' class='ui-box top-rightStart'><span class='ui-border-element'><i class="fa fa-eraser" aria-hidden="true"></i> Eraser Tool</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-rightStart</header>
              <article><a href='' class='ui-box bottom-rightStart'><span class='ui-border-element'><i class="fa fa-th" aria-hidden="true"></i> Grid Box</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-leftStart</header>
              <article>
                <a href='' class='ui-box bottom-leftStart'><span class='ui-border-element'><i class="fa fa-scissors" aria-hidden="true"></i> Scissors</a></span>
              </article>
          </section>

          <!-- next -->

          <section class="box">
              <header>.ui-box .top-leftStart-backward</header>
              <article><a href='' class='ui-box top-leftStart-backward'><span class='ui-border-element'><i class="fa fa-bitbucket" aria-hidden="true"></i> BitBuckket</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .top-rightStart-backward</header>
              <article><a href='' class='ui-box top-rightStart-backward'><span class='ui-border-element'><i class="fa fa-amazon" aria-hidden="true"></i> Amazom E-commerce</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-rightStart-backward</header>
              <article><a href='' class='ui-box bottom-rightStart-backward'><span class='ui-border-element'><span class='ui-border-element'><i class="fa fa-android" aria-hidden="true"></i> Google Android</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-leftStart-backward</header>
              <article>
                <a href='' class='ui-box bottom-leftStart-backward'><span class='ui-border-element'><i class="fa fa-apple" aria-hidden="true"></i> Apple</a></span>
              </article>
          </section>

          <!-- next -->

          <section class="box">
              <header>.ui-box .top-leftStart-burst</header>
              <article><a href='' class='ui-box top-leftStart-burst'><span class='ui-border-element'><i class="fa fa-firefox" aria-hidden="true"></i> FireFox Browser</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .top-rightStart-burst</header>
              <article><a href='' class='ui-box top-rightStart-burst'><span class='ui-border-element'><i class="fa fa-safari" aria-hidden="true"></i> Safari Browser</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-rightStart-burst</header>
              <article><a href='' class='ui-box bottom-rightStart-burst'><span class='ui-border-element'><span class='ui-border-element'><i class="fa fa-chrome" aria-hidden="true"></i> Chrome Browser</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-leftStart-burst</header>
              <article>
                <a href='' class='ui-box bottom-leftStart-burst'><span class='ui-border-element'><i class="fa fa-internet-explorer" aria-hidden="true"></i> Internet Explorer</a></span>
              </article>
          </section>

          <!-- next -->

          <section class="box">
              <header>.ui-box .top-leftStart-burst-backward</header>
              <article><a href='' class='ui-box top-leftStart-burst-backward'><span class='ui-border-element'><i class="fa fa-paypal" aria-hidden="true"></i> Paypal</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .top-rightStart-burst-backward</header>
              <article><a href='' class='ui-box top-rightStart-burst-backward'><span class='ui-border-element'><i class="fa fa-google-wallet" aria-hidden="true"></i> Google Wallet</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-rightStart-burst-backward</header>
              <article><a href='' class='ui-box bottom-rightStart-burst-backward'><span class='ui-border-element'><span class='ui-border-element'><i class="fa fa-cc-discover" aria-hidden="true"></i> Discovery Card</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-leftStart-burst-backward</header>
              <article>
                <a href='' class='ui-box bottom-leftStart-burst-backward'><span class='ui-border-element'><i class="fa fa-cc-visa" aria-hidden="true"></i> Visa Card</a></span>
              </article>
          </section>
          <section class="divider">
              <div class='dividerLine'></div>
          </section>
          <!-- next -->

          <section class="box">
              <header>.ui-box .top-stay</header>
              <article><a href='' class='ui-box top-stay'><span class='ui-border-element'><i class="fa fa-facebook" aria-hidden="true"></i> Facebook Network</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .right-stay</header>
              <article><a href='' class='ui-box right-stay'><span class='ui-border-element'><i class="fa fa-twitter" aria-hidden="true"></i> Twiiter Network</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .bottom-stay</header>
              <article><a href='' class='ui-box bottom-stay'><span class='ui-border-element'><i class="fa fa-youtube" aria-hidden="true"></i> Youtube Network</span></a></article>
          </section>

          <section class="box">
              <header>.ui-box .left-stay</header>
              <article>
                <a href='' class='ui-box left-stay'><span class='ui-border-element'><i class="fa fa-github" aria-hidden="true"></i> GitHub Network</a></span>
              </article>
          </section>

      </section>
		</main>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/css3/css3donghua/201509192593.html">
			  <img src="related/1.jpg" width="300" alt="6种炫酷的CSS3按钮边框动画特效"/>
			  <h3>6种炫酷的CSS3按钮边框动画特效</h3>
			</a>
			<a href="http://www.htmleaf.com/html5/html5donghua/20141009100.html">
			  <img src="related/2.jpg" width="300" alt="html5 svg+css3制作图片边框运动动画效果"/>
			  <h3>html5 svg+css3制作图片边框运动动画效果</h3>
			</a>
		</div>
	</div>

</body>
</html>